<template>
  <div class="right-bar-container" :class="hide?'hide':''">
    <div class="bar-content" ref="barRef">
    </div>
  </div>
</template>
<script>
import { getVideoIndex } from "@/api"
export default {
  props: {
    hide: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    mapBottle: null
  }),
  beforeDestory() {
    if (this.mapBottle) {
      this.mapBottle.dispose()
      window.addEvenvListener("resize", () => false)
    }
  },
  watch: {
    hide(value) {
      if (!value) {
        this.initState()
      } else {
        this.mapBottle.dispose()
      }
    }
  },
  mounted() {
    const { hide } = this
    if (!hide) {
      this.initState()
    } else {
      this.mapBottle.dispose()
    }
  },
  methods: {
    initState() {
      const dom = this.$refs.barRef
      getVideoIndex().then(res => {
        this.mapBottle = this.echarts.init(dom)
        const result = res.data,
          seriesLabel = {
            normal: {
              show: true,
              textBorderColor: "#333",
              textBorderWidth: 2
            }
          },
          yData = [],
          seriesCompany = [],
          seriesDevice = []

        result.reverse().forEach(t => {
          yData.push(t.cityName)
          seriesCompany.push(t.companyTotal)
          seriesDevice.push(t.deviceTotal)
        })
        let option = {
          grid: {
            top: "10%",
            left: "20%"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          xAxis: {
            show: false
          },
          color: ["#32d3eb", "#FFDA43"],
          yAxis: {
            type: "category",
            data: yData,
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisLabel: {
              color: "#fff"
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: "设备分布",
              type: "bar",
              label: seriesLabel,
              data: seriesDevice
            }
          ]
        }
        this.mapBottle.setOption(option)
        window.addEventListener("resize", () => {
          this.mapBottle.resize()
        })
      })
    }
  }
}
</script>
